<template>
	<div class="view">
		<div v-for="(item, index) in data.works"
			class="works-item">
			<div @click="selectItem(item, index)">
				<img :src="item.poster" class="poster" />
			</div>
			<p class="w-p-item">
				<span 
					class="w-attr"
					v-text="item.attribute.name" 
					v-bind:style="{'border': '1px solid ' + item.attribute.strokeColor, 
					'color': item.attribute.textColor, 
					'background-color': item.attribute.bgColor}"></span>
				<span 
					class="w-name"
					v-text="item.name"></span>
			</p>
			<p class="w-p-item">
				<span class="key">上映地区</span>
				<span v-text="item.areaName"></span>
			</p>
			<p class="w-p-item">
				<span class="key">上映日期</span>
				<span v-text="item.releaseDate"></span>
			</p>
			<p class="w-p-item">
				<span class="key">类型</span>
				<span v-text="item.types" class="value"></span>
			</p>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			selectItem: function(item, index) {
				this.$emit('on-sel-item', item, index);
			},
			clickBtn: function(item, index, btnIndex) {
				this.$emit('on-click', item, index, btnIndex);
			}
		},
		props: ['data']
	}
</script>

<style scoped>
	.view {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		/*justify-content: center;
		-webkit-justify-content: center;
		-moz-justify-content: center;*/
	}
	
	.works-item {
		width: 191px;
		padding: 10px;
		border: 1px solid #E8E8E8;
		cursor: pointer;
		margin-right: 10px;
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		flex-direction: column;
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		margin-bottom: 20px;
	}

	.works-item:nth-of-type(5n) {
		margin-right: 0;
	}

	.works-item:hover {
		box-shadow: 0px 0px 6px #E8E8E8;
		-webkit-box-shadow: 0px 0px 6px #E8E8E8;
		-moz-box-shadow: 0px 0px 6px #E8E8E8;
	}
	
	.w-p-item {
		margin-top: 5px;
		font-size: 13px;
	}
	
	.w-p-item .key {
		font-weight: bold;
		color: #333333;
		font-size: 12px;
		margin-right: 5px;
	}
	.w-p-item .value {
		word-wrap: break-word; 
　　		word-break: normal; 
		font-size: 12px;
	}
	.w-attr {
		border-radius: 5px;
		font-size: 12px;
		padding: 1px 3px;
		margin-right: 5px;
	}
	
	.w-name {
		font-size: 15px;
		color: #000000;
		opacity: 0.87;
	}
	
	.poster {
		width: 170px;
		height: 238px;
		display: block;
		background: #999999;
		margin: 0 auto;
		margin-bottom: 10px;
	}

</style>